<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/detailed.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./font/iconfont.css">
  <script src="./js/bootstrap.js"></script>
  <title>Document</title>
</head>

<body>
  <!-- 页面详情 -->
  <div class="container">
    <div class="row">
      <div class="col-2 lcon-s">
        <div class="d-grid gap-2 col-6 mx-auto lcon">
          <button class="btn btn-light col-4 rounded-circle give-s" type="button"><span
              class="iconfont icon-dianzan_kuai give"></span></button>
          <button class="btn btn-light col-4 rounded-circle press-v" type="button"><a class=" list-group-item"
              href="#remark"><span class="iconfont icon-liaotian press"></span></a></button>
          <button class="btn btn-light col-4 rounded-circle coll-v" type="button"><span
              class="iconfont icon-wujiaoxing coll"></span></button>
          <button class="btn btn-light col-4 rounded-circle" type="button"><span
              class="iconfont icon-fenxiang"></span></button>
          <button class="btn btn-light col-4 rounded-circle" type="button"><span
              class="iconfont icon-gantanhao_icon"></span></button>
          <button class="btn btn-light col-4 rounded-circle" type="button"><span
              class="iconfont icon-saoma"></span></button>
        </div>
      </div>
      <div class="col-7 offset-1 cont">
        <h1 class="rub">哈哈客户打</h1>
        <div class="d-flex position-relative">
          <img src="./images/2.jpg" class="img-thumbnail col-1 rounded-circle" alt="...">
          <div class="bank">
            <p class="mt-0">捡田螺的小男孩</p>
            <span class="">公众号:捡田螺的小男孩</span>
          </div>
        </div>
        <hr>
        <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true"
          class="scrollspy-example" tabindex="0">
          <h4 id="simple-list-item-1">Item 1</h4>
          <p>
            回忆一下什么是同步，什么是异步呢？以方法调用为例，它代表调用方要阻塞等待被调用方法中的逻辑执行完成。这种方式下，当被调用方法响应时间较长时，会造成调用方长久的阻塞，在高并发下会造成整体系统性能下降甚至发生雪崩。异步调用恰恰相反，调用方不需要等待方法逻辑执行完成就可以返回执行其他的逻辑，在被调用方法执行完毕后再通过回调、事件通知等方式将结果反馈给调用方。

            因此，设计一个高并发的系统，需要在恰当的场景使用异步。如何使用异步呢？后端可以借用消息队列实现。比如在海量秒杀请求过来时，先放到消息队列中，快速相应用户，告诉用户请求正在处理中，这样就可以释放资源来处理更多的请求。秒杀请求处理完后，通知用户秒杀抢购成功或者失败。

            作者：捡田螺的小男孩
            链接：https://juejin.cn/post/7185736156573597756
            来源：稀土掘金
            著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
          <h4 id="simple-list-item-2">Item 2</h4>
          <p>
            因此，设计一个高并发的系统，需要在恰当的场景使用异步。如何使用异步呢？后端可以借用消息队列实现。比如在海量秒杀请求过来时，先放到消息队列中，快速相应用户，告诉用户请求正在处理中，这样就可以释放资源来处理更多的请求。秒杀请求处理完后，通知用户秒杀抢购成功或者失败。
            13. 常规的优化
            设计一个高并发的系统，需要设计接口的性能足够好，这样系统在相同时间，就可以处理更多的请求。当说到这里的话，大家就可以跟面试官说说接口优化的一些方案了。大家可以看下我的这篇文章哈:实战总结！18种接口优化方案的总结

            作者：捡田螺的小男孩
            链接：https://juejin.cn/post/7185736156573597756
            来源：稀土掘金
            著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
          <div class="d-flex position-relative">
            <img src="./images/1.jpg" class="flex-shrink-0 me-3 col-2" alt="...">
            <div>
              <h5 class="mt-0">Custom component with stretched link</h5>
              <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world
                content would look like, and we're using it here to give the component a bit of body and size.</p>
              <a href="#" class="stretched-link">Go somewhere</a>
            </div>
          </div>
          <h4 id="simple-list-item-3">Item 3</h4>
          <p>14. 压力测试确定系统瓶颈
            设计高并发系统，离不开最重要的一环，就是压力测试。就是在系统上线前，需要对系统进行压力测试，测清楚你的系统支撑的最大并发是多少，确定系统的瓶颈点，让自己心里有底，最好预防措施。
            压测完要分析整个调用链路，性能可能出现问题是网络层（如带宽）、Nginx层、服务层、还是数据路缓存等中间件等等。
            loadrunner是一款不错的压力测试工具，jmeter则是接口性能测试工具，都可以来做下压测。

            作者：捡田螺的小男孩
            链接：https://juejin.cn/post/7185736156573597756
            来源：稀土掘金
            著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
          <h4 id="simple-list-item-4">Item 4</h4>
          <p>15. 应对突发流量峰值：扩容+切流量
            如果是突发的流量高峰，除了降级、限流保证系统不跨，我们可以采用这两种方案，保证系统尽可能服务用户：

            扩容：比如增加从库、提升配置的方式，提升系统/组件的流量承载能力。比如增加MySQL、Redis从库来处理查询请求。
            切流量：服务多机房部署，如果高并发流量来了，把流量从一个机房切换到另一个机房。

            参考与感谢

            作者：捡田螺的小男孩
            链接：https://juejin.cn/post/7185736156573597756
            来源：稀土掘金
            著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
          <h4 id="simple-list-item-5">Item 5</h4>
          <p>...</p>

        </div>
        <!-- 评论 -->
        <div class="hstack gap-3" id="remark">
          <input class="form-control me-auto" type="text" placeholder="请输入你的想法" aria-label="Add your item here...">
          <button type="button" class="btn btn-primary col-2">发布</button>
        </div>
        <p class="col">全部评论</p>
        <div class="d-flex position-relative">
          <img src="./images/2.jpg" class="" width="50" height="50" alt="...">
          <div class="observe">
            <h5 class="mt-0">CUYU</h5>
            <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world
              content would look like, and we're using it here to give the component a bit of body and size.</p>
            <p><span class="iconfont icon-dianzan_kuai give-v">点赞</span></p>
            <p class="reply"><span class="iconfont icon-liaotian reply-v">回复</span></p>
          </div>
        </div>
        <div class="hstack gap-3 col-10 offset-2 two" id="remark">
          <input class="form-control me-auto" type="text" placeholder="回复" aria-label="Add your item here...">
          <button type="button" class="btn btn-primary col-2">发布</button>
        </div>
        <div class="d-flex col-10 offset-2 position-relative stage ">
          <img src="./images/2.jpg" class="" width="50" height="50" alt="...">
          <div class="observe">
            <h5 class="mt-0">CUYU</h5>
            <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world
              content would look like, and we're using it here to give the component a bit of body and size.</p>
            <p><span class="iconfont icon-dianzan_kuai give-c">点赞</span></p>
            <p class="reply"><span class="iconfont icon-liaotian reply-h">回复</span></p>
          </div>
        </div>
        <div class="d-flex col-10 offset-2 position-relative stage ">
          <img src="./images/2.jpg" class="" width="50" height="50" alt="...">
          <div class="observe">
            <h5 class="mt-0">CUYU</h5>
            <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world
              content would look like, and we're using it here to give the component a bit of body and size.</p>
            <p><span class="iconfont icon-dianzan_kuai give-n">点赞</span></p>
            <p class="reply"><span class="iconfont icon-liaotian reply-m">回复</span></p>
          </div>
        </div>
      </div>
      <div class="col-3 rig">
        <!-- 账号 -->
        <div class="d-flex position-relative cont-h">
          <img src="./images/2.jpg" class="imag" alt="...">
          <div class="cont-v">
            <p class="user">捡田螺的小q男孩</p>
            <p class="">公众号:<span>捡dssad小男孩</span></p>
          </div>
        </div>
        <div class="account fol">
          <button class="btn btn-primary col-5" type="button">关注</button>
          <button class="btn btn-outline-secondary col-5" type="button">私信</button>
        </div>
        <hr>
        <!-- 目录 -->
        <div id="simple-list-example"
          class=" account d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
          <p>目录</p>
          <a class="p-1 rounded list-group-item" href="#simple-list-item-1">Item 1</a>
          <a class="p-1 rounded list-group-item" href="#simple-list-item-2">Item 2</a>
          <a class="p-1 rounded list-group-item" href="#simple-list-item-3">Item 3</a>
          <a class="p-1 rounded list-group-item" href="#simple-list-item-4">Item 4</a>
          <a class="p-1 rounded list-group-item" href="#simple-list-item-5">Item 5</a>
        </div>
      </div>

    </div>

  </div>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(".give-s").click(function () {
      // $(".give").css("color","blue")
      if ($(".give").css("color") == "rgb(138, 145, 159)") {
        $(".give").css("color", "blue");

      } else {
        if ($(".give").css("color") == "rgb(0, 0, 255)") {
          $(".give").css("color", "rgb(138, 145, 159)")
        }
      }

      console.log($(".give").css("color"));
    })
    $(".coll-v").click(function () {
      // $(".give").css("color","blue")
      if ($(".coll").css("color") == "rgb(138, 145, 159)") {
        $(".coll").css("color", "blue");

      } else {
        if ($(".coll").css("color") == "rgb(0, 0, 255)") {
          $(".coll").css("color", "rgb(138, 145, 159)")
        }
      }

      console.log($(".coll").css("color"));
    })
    $(".give-v,.give-c,.give-n").click(function () {
      if ($(this).css("color") == "rgb(138, 145, 159)") {
        $(this).css("color", "blue")
        $(this).html("1");

      }
      else {
        if ($(this).css("color") == "rgb(0, 0, 255)") {
          $(this).css("color", "rgb(138, 145, 159)")
          $(this).html("点赞");
        }
      }
      console.log($(".give-v").css("color"));
    })
    $(".reply-v,.reply-h,.reply-m").click(function () {
      if ($(this).css("color") == "rgb(138, 145, 159)") {
        $(this).css("color", "blue")
        $(this).html("取消评论");

      }
      else {
        if ($(this).css("color") == "rgb(0, 0, 255)") {
          $(this).css("color", "rgb(138, 145, 159)")
          $(this).html("评论");
        }
      }
    })
    $(".two").hide();
    $(".reply-v").click(function () {
      if ($(this).css("color") == "rgb(138, 145, 159)") {
          $(".two").hide();
      }
      else {
        if ($(this).css("color") == "rgb(0, 0, 255)") {
          $(".two").show();
        }
      }
    })
  </script>
</body>

</html>